<template>
  <el-main>
    <el-alert
      title="扩展了Element Plus图标库,可以在@/assets/icons中新增自己的SVG图标组件,记得在@/assets/icons/index.js中引入. 建议前往阿里iconfont复制SVG代码 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=25353"
      type="success"
      style="margin-bottom: 20px"
    ></el-alert>
    <el-row :gutter="0" class="box">
      <el-col v-for="(icon, index) in icons" :key="index" :span="4">
        <div class="icon-box">
          <el-icon>
            <component :is="icon" />
          </el-icon>
          <p>{{ icon }}</p>
        </div>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import * as scIcons from '@/assets/icons'

export default {
  data() {
    return {
      icons: []
    }
  },
  mounted() {
    for (let icon in scIcons) {
      this.icons.push('sc-icon' + icon.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase()))
    }
  }
}
</script>

<style scoped>
.box {
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
}

.icon-box {
  height: 120px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  color: #666;
  padding: 30px 10px;
}

.icon-box i {
  font-size: 26px;
  transition: color 0.15s linear;
}

.icon-box p {
  color: #999;
  margin-top: 15px;
  transition: color 0.15s linear;
}

.icon-box:hover i,
.icon-box:hover p {
  color: #5cb6ff;
}

.dark .box {
  border-color: var(--el-border-color-light);
}

.dark .icon-box {
  background: var(--el-bg-color-overlay);
  border-color: var(--el-border-color-light);
}
</style>
